<template>
	<view class="conner">
		<view class="top">
			<view style="height: 88rpx;"></view>
			<view class="top_ist">
				<image @click="back()" class="t_img" :src="url+'/image/back_left.png'" mode=""></image>
				<view class="top_list_r">
					<view class="top_r_c grey_h_28" v-for="(item,index) in topList" @click="dianji(index)"
						:class="active == index?'top_r_er black_f_28':'top_r_c grey_h_28'">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="grey_f_28 mar_r_40" v-for="(itm,index) in boList" @click="dianji2(index)"
				:class="bactive == index?'blue_f_32 font_w_bold mar_r_40':'grey_f_28 mar_r_40'">
				{{itm.text}}
			</view>
		</view>
		<view>
			<!-- <view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" style="height: 300rpx;"> -->
			<scroll-view  scroll-y="true"  class="scroll-Y" >
				<view class="back bor_bot" v-for="(item,index) in lists" v-if="active == 0">
					<view class=" dis_f_sb_c bor_bot">
						<image class="y_img" :src="item.goods_image" mode=""></image>
						<view class="y_right">
							<view class="black_f_28 slh_two font_w_bold" style="line-height: 44rpx;">
								{{item.name}}
							</view>
							<view class="grey_f_24"> 销量{{item.sales}} 库存 {{item.stock}}</view>
							<view class="orange_f_32 font_w_bold" style="text-align: right;"><text
									class="orange_f_24">￥</text>{{item.retail_price}}
									<!-- <text class="orange_f_24">.05</text> -->
								</view>
						</view>
					</view>
					<view class="y_bo_but dis_f_r_c">
						<view class="bottom_hui dis_f_c_c mar_l_24" @click="del(item)">
							<image class="but_img" :src="url+'/image/delet.png'" mode=""></image>
							<view class="grey_h_28">删除</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-if="item.is_on_sale == 1" @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/downlod.png'" mode=""></image>
							<view class="grey_h_28">下架</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-else @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/uplod.png'" mode=""></image>
							<view class="grey_h_28">上架</view>
						</view>
						<view class="bottom_blue dis_f_c_c mar_l_24" @click="edit(item)">
							<image class="but_img" :src="url+'/image/bianji.png'" mode=""></image>
							<view class="white_f_28">编辑</view>
						</view>
					</view>
				</view>
				
				
				<view class="back bor_bot" v-if="active == 1" v-for="(item,index) in lists">
					<view class=" dis_f_sb_c bor_bot">
						<image class="y_img" :src="item.goods_image" mode=""></image>
						<view class="y_right">
							<view class="black_f_28 slh_two font_w_bold" style="line-height: 44rpx;">{{item.name}}</view>
							<view class="black_f_28 slh_two" style="line-height: 44rpx;">车架号：{{item.frame_number}}</view>
							<view class="grey_f_24"> 销量{{item.sales}} 库存{{item.stock}}</view>
							<view class="orange_f_32 dis_f_r_c">
								<view class="mar_r_16">
									<text class="orange_f_24">￥</text>
									<text class="font_w_bold">{{item.day_money*1}}</text>
									<text class="orange_f_24">/日</text>
								</view>
								<view>
									<text class="orange_f_24">￥</text>
									<text class="font_w_bold">{{item.moth_money*1}}</text>
									<text class="orange_f_24">/月</text>
								</view>
							</view>
						</view>
					</view>
					<view class="y_bo_but dis_f_r_c">
						<view class="bottom_hui dis_f_c_c mar_l_24" @click="del(item)">
							<image class="but_img" :src="url+'/image/delet.png'" mode=""></image>
							<view class="grey_h_28">删除</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-if="item.is_on_sale == 1" @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/downlod.png'" mode=""></image>
							<view class="grey_h_28">下架</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-else @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/uplod.png'" mode=""></image>
							<view class="grey_h_28">上架</view>
						</view>
						<view class="bottom_blue dis_f_c_c mar_l_24" @click="edit(item)">
							<image class="but_img" :src="url+'/image/bianji.png'" mode=""></image>
							<view class="white_f_28">编辑</view>
						</view>
					</view>
				</view>
				<view class="back bor_bot" v-if="active == 2" v-for="(item,index) in lists">
					<view class=" dis_f_sb_c bor_bot">
						<image class="y_img" :src="item.goods_image" mode=""></image>
						<view class="y_right">
							<view class="black_f_28 slh_two font_w_bold" style="line-height: 44rpx;">
								{{item.name}}
							</view>
							<view class="grey_f_24"> 销量{{item.sales}} 库存 {{item.stock}}</view>
							<view class="orange_f_32 font_w_bold" style="text-align: right;"><text
									class="orange_f_24">￥</text>
									{{item.retail_price}}
									<!-- <text class="orange_f_24">.05</text> -->
							</view>
						</view>
					</view>
					<view class="y_bo_but dis_f_r_c">
						<view class="bottom_hui dis_f_c_c mar_l_24" @click="del(item)">
							<image class="but_img" :src="url+'/image/delet.png'" mode=""></image>
							<view class="grey_h_28">删除</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-if="item.is_on_sale == 1" @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/downlod.png'" mode=""></image>
							<view class="grey_h_28">下架</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-else @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/uplod.png'" mode=""></image>
							<view class="grey_h_28">上架</view>
						</view>
						<view class="bottom_blue dis_f_c_c mar_l_24" @click="edit(item)">
							<image class="but_img" :src="url+'/image/bianji.png'" mode=""></image>
							<view class="white_f_28">编辑</view>
						</view>
					</view>
				</view>
				<view class="back bor_bot" v-if="active == 3" v-for="(item,index) in lists">
					<view class=" dis_f_sb_c bor_bot">
						<image class="y_img" :src="item.goods_image" mode=""></image>
						<view class="y_right">
							<view class="black_f_28 slh_two font_w_bold" style="line-height: 44rpx;">
								{{item.name}}
							</view>
							<view class="grey_f_24"> 销量{{item.sales}} 库存 {{item.stock}}</view>
							<view class="orange_f_32 font_w_bold" style="text-align: right;"><text
									class="orange_f_24">￥</text>
									{{item.retail_price}}
									<!-- <text class="orange_f_24">.05</text> -->
							</view>
						</view>
					</view>
					<view class="y_bo_but dis_f_r_c">
						<view class="bottom_hui dis_f_c_c mar_l_24" @click="del(item)">
							<image class="but_img" :src="url+'/image/delet.png'" mode=""></image>
							<view class="grey_h_28">删除</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-if="item.is_on_sale == 1" @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/downlod.png'" mode=""></image>
							<view class="grey_h_28">下架</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-else @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/uplod.png'" mode=""></image>
							<view class="grey_h_28">上架</view>
						</view>
						<view class="bottom_blue dis_f_c_c mar_l_24" @click="edit(item)">
							<image class="but_img" :src="url+'/image/bianji.png'" mode=""></image>
							<view class="white_f_28">编辑</view>
						</view>
					</view>
				</view>
				<view class="back bor_bot" v-if="active == 4" v-for="(item,index) in lists">
					<view class=" dis_f_sb_c bor_bot">
						<image class="y_img" :src="item.goods_image" mode=""></image>
						<view class="y_right">
							<view class="black_f_28 slh_two font_w_bold" style="line-height: 44rpx;">
								{{item.name}}
							</view>
							<view class="grey_f_24"> 销量{{item.sales}} 库存 {{item.stock}}</view>
							<view class="orange_f_32 font_w_bold" style="text-align: right;"><text
									class="orange_f_24">￥</text>
									{{item.retail_price}}
									<!-- <text class="orange_f_24">.05</text> -->
							</view>
						</view>
					</view>
					<view class="y_bo_but dis_f_r_c">
						<view class="bottom_hui dis_f_c_c mar_l_24" @click="del(item)">
							<image class="but_img" :src="url+'/image/delet.png'" mode=""></image>
							<view class="grey_h_28">删除</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-if="item.is_on_sale == 1" @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/downlod.png'" mode=""></image>
							<view class="grey_h_28">下架</view>
						</view>
						<view class="bottom_hui dis_f_c_c mar_l_24" v-else @click="sxj_status(item)">
							<image class="but_img" :src="url+'/image/uplod.png'" mode=""></image>
							<view class="grey_h_28">上架</view>
						</view>
						<view class="bottom_blue dis_f_c_c mar_l_24" @click="edit(item)">
							<image class="but_img" :src="url+'/image/bianji.png'" mode=""></image>
							<view class="white_f_28">编辑</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- </view> -->
		</view>
		<view>
				<view class="bule_back_but bot_wz" @click="go_view()">
					添加商品
				</view>
			
			<image class="bo_js_img" :src="url+'/image/zcxian.png'"  mode=""></image>
		</view>
		<view>
			<u-popup :show="show" mode="center" :round="10" @close="close">
				<view class="tc">
					<view class="font_w_bold black_f_32 bor_b_48 dis_f_c_c">商品编辑</view>
					<view class="tc_b">
						<view class="dis_f_sb_t bor_b_48">
							<view class="black_s_28 mar_t_5">规格名称</view>
							<view class="tc_b_r">
								<u--input placeholder="请输入商品名称" fontSize="14px" border="none" v-model="item.name"
									@change="change"></u--input>
							</view>
						</view>
						<view class="dis_f_sb_t bor_b_48">
							<view class="black_s_28 mar_t_5">销售价格</view>
							<view class="tc_b_r dis_f_r_c">
								<u--input placeholder="请填写销售价格" fontSize="14px" border="none" v-model="item.retail_price"
									@change="change"></u--input>
								<view class="black_s_28">
									元
								</view>
							</view>
						</view>
						<view class="dis_f_sb_t bor_b_48">
							<view class="black_s_28 mar_t_5">商品库存</view>
							<view class="tc_b_r">
								<u--input placeholder="请填写商品库存" fontSize="14px" border="none" v-model="item.stock"
									@change="change"></u--input>
							</view>
						</view>
						<view class="dis_f_sb_t bor_b_48">
							<view class="black_s_28 mar_t_5">商品图片</view>
							<view class="tc_b_img">
								<view class="tc_b_er">
									<image class="image" :src="item.goods_image" mode="" @click="add_img"></image>
									<image class="delet" :src="url+'/image/shanchu.png'" mode=""></image>
								</view>
								<!-- <view>
									<image class="image" src="../../static/image/add.png" mode=""></image>
								</view>
								<view class="grey_f_20">建议上传尺寸为1:1的图片</view> -->
							</view>
						</view>
					</view>
					<view class="dis_f_sb_c">
						<view class="tc_c_l black_s_32 font_w_bold" @click="close()">取消</view>
						<view class="tc_c_r white_f_32 font_w_bold" @click="edit_sub()">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup :show="sc_show" mode="center" :round="10" @close="sc_close">
				<view class="tc">
					<view class="font_w_bold black_f_32 bor_b_48 dis_f_c_c">商品删除</view>
					<view class="grey_f_28 dis_f_c_c bor_b_40">
					是否删除这件商品？
					</view>
					<view class="dis_f_sb_c">
						<view class="tc_c_l black_s_32 font_w_bold" @click="sc_close()">取消</view>
						<view class="tc_c_r white_f_32 font_w_bold mar_l_24" @click="del_sub()">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup :show="xj_show" mode="center" :round="10" @close="xj_close">
				<view class="tc">
					<view class="font_w_bold black_f_32 bor_b_48 dis_f_c_c">商品{{item.is_on_sale == 1 ? '下架' :'上架'}}</view>
					<view class="grey_f_28 dis_f_c_c bor_b_40">
					是否{{item.is_on_sale == 1 ? '下架' :'上架'}}这件商品？
					</view>
					<view class="dis_f_sb_c">
						<view class="tc_c_l black_s_32 font_w_bold" @click="xj_close()">取消</view>
						<view class="tc_c_r white_f_32 font_w_bold mar_l_24" @click="status_sub">确定</view>
					</view>
				</view>
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topList: [{
					name: "商城"
				}, {
					name: "租车"
				}, {
					name: "电池"
				},{
					name: "租电池"
				},
				{
					name: "换电池"
				}
				],
				boList: [{
					text: "在售中"
				}, {
					text: "已下架"
				}],
				active: 0,
				bactive: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				show: false,
				sc_show: false,
				xj_show:false,
				sj_show:false,
				value: '哈啰电动车新国标电动自行车锂电成人男女学生智能A80电瓶车',
				value1: '121.05',
				value2: '1200',
				
				lists:[],
				page:1,
				total:0,
				count:0,
				status: 'loadmore',
				item:{},
				img_url:'',
				url:''
			}
		},
		onShow() {
			this.url=this.$.ajax_url3
			this.page = 1;
			this.get_lists()
			
		},
		onReachBottom() {
			// if (this.page >= this.total){
			// 	 this.status = 'nomore';
			// 	  return;
			// }
			this.status = 'loading';
			this.page++
			this.get_lists()
		},
		onPullDownRefresh(){
			this.status = 'loading';
			this.page = 1;
			this.lists = [];
			this.get_lists()
		},
		methods: {
			add_img(){
				this.$.add_img(1,(res)=>{
					if(res.code == 1){
						this.item.goods_image = res.data.fullurl
						this.img_url = res.data.url
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			},
			status_sub(){
				let is_on_sale = this.item.is_on_sale == 1 ? 0 : 1;
				this.$.ajax(1,'post','store/product/on_sale',{
					id:this.item.id,
					type:is_on_sale,
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						this.xj_show = false;
						this.page = 1;
						this.lists = [];
						this.get_lists()
					}
				});
			},
			
			
			
			
			edit_sub(){
				this.$.ajax(1,'post','store/product/edit_product',{
					id:this.item.id,
					name:this.item.name,
					retail_price:this.item.retail_price,
					goods_image:this.item.goods_image,
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						this.show = false;
						this.page = 1;
						this.lists = [];
						this.get_lists()
					}
				});
			},
			del_sub(){
				this.$.ajax(1,'post','store/product/del_product',{
					id:this.item.id
				},(res)=>{
					this.$.ti_shi(res.msg)
					if(res.code == 200){
						this.sc_show = false;
						this.page = 1;
						this.lists = [];
						this.get_lists()
					}
				});
			},
			edit(item){
				this.item = item;
				if (this.active == 0) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp?id='+item.id
					})
				} else if (this.active == 1) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp2?id='+item.id
					})
				} else if (this.active == 2) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp3?id='+item.id
					})
				}else if (this.active == 3) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp4?id='+item.id
					})
				}else if (this.active == 4) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp5?id='+item.id
					})
				}
			},
			del(item){
				this.item = item;
				this.sc_show = true;
			},
			sxj_status(item){
				this.item = item;
				this.xj_show = true;
			},
			get_lists(){
				this.$.ajax(1,'post','store/product/store_product',{
					type:this.active+1,
					is_on_sale:this.bactive+1,
					page:this.page,
					pagesize:10,
				},(res)=>{
					// this.total = res.data.total
					// this.count = res.data.count
					if(this.page == 1){
						this.lists = res.data
					}else{
						this.lists = this.lists.concat(res.data)
					}
					// if (this.page >= this.total){
					// 	this.status = 'nomore';
					// }else{
					// 	this.status = 'loadmore';
					// }
				})
			},
			dianji(index) {
				this.active = index
				this.page = 1;
				this.lists = [];
				this.get_lists()
			},
			dianji2(index) {
				this.bactive = index
				this.page = 1;
				this.lists = [];
				this.get_lists()
			},
			back() {
				uni.navigateBack(1)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			go_view() {
				if (this.active == 0) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp'
					})
				} else if (this.active == 1) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp2'
					})
				} else if (this.active == 2) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp3'
					})
				}else if (this.active == 3) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp4'
					})
				}else if (this.active == 4) {
					uni.navigateTo({
						url: '/pages-2/wd_er/tj_sp5'
					})
				}
			},
			close() {
				this.show = false
			},
			sc_close() {
				this.sc_show = false
			},
			xj_close() {
				this.xj_show = false
			},
			sj_close() {
				this.sj_show = false
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log('change', e);
			},
			change2(e) {
				console.log('change', e);
			}
		}
	}
</script>

<style lang="scss">
	.conner {
		padding: 0 32rpx;
	}

	.top_ist {
		height: 88rpx;
		display: flex;
		align-items: center;

		.t_img {
			width: 40rpx;
			height: 40rpx;
		}

		.top_list_r {
			// width: 280rpx;
			height: 68rpx;
			background: #F7F7F7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-left: 48rpx;

			.top_r_c {
				width: 100rpx;
				height: 52rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 52rpx;
			}

			.top_r_er {
				width: 88rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 52rpx;
				margin: 5rpx;
			}
		}
	}

	.title {
		height: 76rpx;
		display: flex;
		align-items: center;
		margin-top: 80rpx;
	}

	.scroll-Y {
		height: 70vh;

		// background-color: red;
		.y_img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}

		.y_right {
			width: 414rpx;
			display: flex;
			height: 190rpx;
			flex-direction: column;
			justify-content: space-between;
		}

		.y_bo_but {
			.but_img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
		}
	}

	.tc {
		padding: 40rpx 32rpx;
	}

	.tc_b {
		width: 622rpx;
	}

	.tc_b_r {
		width: 478rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #F7FAFF;
	}

	.tc_b_img {
		width: 478rpx;
	}

	.tc_b_er {
		position: relative;
		width: 140rpx;
		height: 140rpx;
	}

	.image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.delet {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: -16rpx;
		right: -16rpx;
	}

	.tc_c_l {
		width: 298rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.tc_c_r {
		width: 298rpx;
		height: 100rpx;
		background: #3377FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
	}
</style>